<template>
  <div class="container">
    <div class="left-grid">
      <el-card>
        <el-row>
          <el-form>
            <el-form-item label="柱状图标题">
              <el-input v-model="title"></el-input>
            </el-form-item>
            <el-form-item label="名称">
              <el-input v-model="input_name"></el-input>
            </el-form-item>
            <el-form-item label="数值">
              <el-input v-model="input_value"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="insertData">插入数据</el-button>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" size="medium" @click="create_axis"
                >点击生成表格</el-button
              >
            </el-form-item>
          </el-form>
        </el-row>
      </el-card>
      <el-card>
        <el-row>
          <el-table :data="pie_data" :show-header="true" :height="320" stripe>
            <el-table-column type="index" label="序号" width="100%">
            </el-table-column>
            <el-table-column prop="name" label="名称"></el-table-column>
            <el-table-column prop="value" label="数值"></el-table-column>
            <el-table-column label="操作">
              <template #default="scope">
                <el-button type="danger" @click="deleteItemByIndex(scope.row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-row>
      </el-card>
    </div>
    <div class="right-grid" ref="myChart"></div>
  </div>
</template>

<script>
import { getCurrentInstance } from "vue";
export default {
  data() {
    return {
      pie_data: [
        { name: "制造业", value: 55.217 },
        { name: "金融业", value: 21.714 },
        { name: "采矿业", value: 4.333 },
        { name: "信息传输、软件和信息技术服务业", value: 4.308 },
        { name: "交通运输、仓储和邮政业", value: 3.242 },
        { name: "电力、热力、燃气及水的生产和供应业", value: 3.193 },
      ],
      title: "在线绘制饼状图",
      echarts: getCurrentInstance().appContext.config.globalProperties.$echarts,
      input_name: "",
      input_value: 0,
    };
  },
  mounted() {
    this.create_pie();
  },
  methods: {
    create_pie() {
      console.log(this.pie_data);
      var myChart = this.echarts.init(this.$refs["myChart"]);
      var option = {
        title: {
          text: this.title, //标题
        },
        toolbox: {
          feature: {
            dataZoom: {
              yAxisIndex: "none",
            },
            restore: {},
            saveAsImage: {},
          },
        },
        tooltip: {},
        legend: {
          y: 50,
          textStyle: {
            fontSize: 14,
          },
        },
        label: {
          show: true,
        },
        series: [
          {
            name: "分布", //数据的名字
            type: "pie", //表示柱状图
            radius: "70%", //圆的半径
            center: ["50%", "60%"],
            label: {
              formatter: function (params) {
                console.log(params.name + " " + params.value + "%");
                return params.name + " " + params.value + "%";
              },
              textStyle: {
                fontSize: 14,
                fontWeight: "bolder",
              },
              color: "inherit",
            },
            data: this.pie_data,
            selectedMode: "single", //选中效果，使选中区域偏离圆心一小段距离，single或者multiple
            selectedOffset: 10, //偏离圆心的一小段距离
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
    deleteItemByIndex(row) {
      var index = this.pie_data.findIndex((item) => item.name == row.name);
      this.pie_data.splice(index, 1);
      this.create_pie();
    },
    insertData() {
      this.pie_data.push({
        name: this.input_name,
        value: this.input_value,
      });
      this.create_pie();
    },
  },
};
</script>

<style scoped>
.container {
  display: grid;
  grid-template-columns: 35% 65%;
  width: 100%;
  height: 80vh;
}

.left-grid {
  background-color: #f0f0f0;
  border-radius: 2%;
  padding: 20px;
  height: 90%;
}

.right-grid {
  background-color: #f9ecc3;
  border-radius: 2%;
  padding: 20px;
  height: 90%;
}

.grid-content1 {
  background-color: rgb(44, 143, 121);

  border-radius: 4px;

  height: 100vh;

  width: 35vw;
}

.grid-content2 {
  background-color: rgb(44, 143, 121);

  border-radius: 4px;

  height: 100vh;

  width: 65vw;
}

.bg-purple {
  background: #7e2970;
}
.bg-purple-light {
  background: #071c4d;
}
</style>
